<template>
  <div class="md-live-pages-container">
    <div class="live-bg">
      <div class="live-content" :style="{backgroundImage: swiperList[0] && swiperList[0].image ? `url(/video-dev${swiperList[0].image})` : ''}"></div>
      <div class="live-box">
        <div class="img-box"></div>
        <!-- <img style="display: none" src="../assets/img/log-in-girl.svg" alt=""> -->
        <div class="live-panel">
          <div class="course-live">
            <div class="c-left">
              <span class="live-date-tit">直播日期</span>
              <ul class="live-date-list scroll-bar" v-if="liveDates.length">
                <li :class="['live-date', liveIndex === i ? 'live-date-active' : '' ]" v-for="(l, i) in liveDates" :key="i" @click="handleDateChange(l, i)">
                  <span>{{l.m}}月</span>
                  <em>{{l.d}}日</em>
                </li>
              </ul>
              <p v-else class="live-date-list no-data">暂无数据</p>
            </div>
            <div class="c-right" v-if="Object.keys(liveInfo).length">
              <img :src="`/video-dev${liveInfo.cover}`" alt="">
            </div>
          </div>
          <div class="course-desc" v-if="Object.keys(liveInfo).length">
            <h4 class="live-tit">{{liveInfo.name}}</h4>
            <p class="live-desc">{{liveInfo.courseDescription}}</p>
            <div style="margin-top: 20px; display: flex; align-items: center; justify-content: space-between">
              <div class="live-teacher">
                <p class="live-t-name">讲师：{{liveInfo.lecturer || '未知'}}</p>
                <p class="live-t-date">直播时间：{{liveInfo.createTime || '未知'}}</p>
              </div>
              <div class="enter-btn" @click="turnVideo(liveInfo)">直播入口</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="course-box">
      <div class="tab-box">
        <ul class="tab-block">
          <li :class="['tab-item', tabIndex === item.dictValue ? 'tab-item-active' : '']" v-for="(item, index) in dictList" :key="index" @click="handleTab(item)">{{item.dictLabel}}</li>
        </ul>
      </div>
      <div class="md-class-container">
        <ul class="md-class-list" v-if="liveList.length">
          <li v-for="(item, index) in liveList" :key="index">
            <div class="md-item-class-component" @click="turnVideo(item)">
              <img :src="`/video-dev${item.cover}`" alt="">
              <p class="title ellipsis2">{{item.name}}</p>
              <p class="one">{{item.courseDescription}}</p>
              <p class="one" v-if="item.liveStartTime">直播开始时间：{{item.liveStartTime}}</p>
              <p class="one" v-if="item.liveStartTime">直播结束时间：{{item.liveEndTime}}</p>
            </div>
          </li>
        </ul>
        <p v-else class="no-data">暂无数据</p>
        <!-- 分页 -->
        <div class="pagination">
          <el-pagination @current-change="handleCurrentChange" :current-page="+params.pageNum" :page-size="params.pageSize" layout="total, prev, pager, next, jumper" :total="total">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { selectLiveList } from '@/axios/live'
import { getBannerList, getDictType } from '@/axios/home'
export default {
  name: 'mdLivePagesComponent',
  data () {
    return {
      liveIndex: 0,
      liveDates: [],
      liveList: [],
      params: {
        liveType: '',
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      tabIndex: 0,
      dictList: [],
      liveInfo: {},
      swiperList: []
    }
  },
  computed: {
    isLogin () {
      return window.localStorage.getItem('isLogin')
    },
    userInfo () {
      return JSON.parse(window.localStorage.getItem('userInfo'))
    }
  },
  created () {
    this.getDictType()
    this.getBannerList()
  },
  methods: {
    async getDictType () {
      const res = await getDictType('md_live_type')
      if (res.code === 200) {
        this.dictList = res.data
        this.tabIndex = this.dictList[0].dictValue
        this.params.liveType = this.dictList[0].dictValue + ''
        this.selectLiveList()
      }
    },
    async selectLiveList () {
      const res = await selectLiveList(this.params)
      if (res.code === 200) {
        this.liveList = res.rows
        this.liveDates = this.liveList.filter(item => {
          return item.isReferral === '1'
        }).slice(0, 3)
        this.liveDates = this.liveDates.map(item => {
          return {
            ...item,
            m: new Date(item.createTime).getMonth() + 1,
            d: new Date(item.createTime).getDate()
          }
        })
        this.liveInfo = this.liveDates[0]
        this.total = res.total
      }
    },
    async getBannerList () { // 获取banner
      const res = await getBannerList({
        type: 2
      })
      if (res.code === 200) {
        this.swiperList = res.data.slice(1)
        // this.oBg = this.swiperList[0].img
      }
    },
    handleTab (item) {
      this.tabIndex = item.dictValue
      this.params.liveType = item.dictValue
      this.selectLiveList()
    },
    handleDateChange (l, i) {
      this.liveIndex = i
      this.liveInfo = l
    },
    handleCurrentChange (val) {
      this.params.pageNum = val
      this.selectLiveList()
    },
    // liveEntrance () {
    //   if (this.isLogin) {
    //     window.open('www.baidu.com', '_blank')
    //   } else {
    //     this.$confirm('是否去登录', '提示', {
    //       confirmButtonText: '确定',
    //       cancelButtonText: '取消',
    //       type: 'warning'
    //     }).then(() => {
    //       this.$router.push({
    //         path: '/login'
    //       })
    //     }).catch(() => {});
    //   }
    // },
    turnVideo (item) {
      if (this.isLogin) {
        window.open(item.liveUrl, '_blank')
      } else {
        this.$confirm('是否去登录', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$router.push({
            path: '/login'
          })
        }).catch(() => {});
      }
    }
  }
}
</script>
<style lang="less" scoped>
.md-live-pages-container {
  width: 100%;
  .live-bg {
    // background: #000;
    // background-repeat: no-repeat;
    // background-size: 100% 100%;
    width: 100%;
    height: 500px;
    position: relative;
    .live-content {
      filter: blur(5px);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    .live-box {
      position: absolute;
      z-index: 2;
      top: 0;
      left: 50%;
      width: 1152px;
      height: 100%;
      // margin: 0 auto;
      margin-left: -576px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .img-box {
        max-width: 600px;
        height: 100%;
      }
      .live-panel {
        width: 500px;
        margin-left: 30px;
        height: 100%;
        .course-live {
          width: 100%;
          height: 350px;
          display: flex;
          align-items: center;
          .c-left {
            // width: 150px;
            height: 100%;
            flex-shrink: 0;
            margin-right: 20px;
            padding: 20px 0;
            box-sizing: border-box;
            .live-date-tit {
              display: inline-block;
              height: 40px;
              line-height: 40px;
              width: 120px;
              background: @md-primary-color;
              border-radius: 4px;
              text-align: center;
              color: #fff;
            }
            .live-date-list {
              background: #fff;
              margin-top: 10px;
              width: 120px;
              height: 260px;
              border-radius: 4px;
              overflow-x: hidden;
              overflow-y: auto;
              .live-date {
                width: 100%;
                height: 86px;
                padding: 10px;
                box-sizing: border-box;
                background: #fff;
                border-bottom: 1px solid #ececec;
                display: flex;
                justify-content: space-between;
                cursor: pointer;
                &:last-child {
                  border-bottom: none;
                }
                &:hover {
                  background: @md-primary-color;
                  span {
                    color: #fff;
                  }
                  em {
                    color: #fff;
                  }
                }
                span {
                  color: #333;
                  font-size: 24px;
                  align-self: flex-end;
                }
                em {
                  align-self: flex-start;
                  color: #333;
                  font-size: 24px;
                }
              }
              .live-date-active {
                background: @md-primary-color;
                span {
                  color: #fff;
                }
                em {
                  color: #fff;
                }
              }
            }
          }
          .c-right {
            flex: 1;
            height: 100%;
            border-radius: 4px;
            overflow: hidden;
            padding: 20px 0;
            box-sizing: border-box;
            img {
              width: 100%;
              // height: 100%;
              // object-fit: cover;
              border-radius: 4px;
            }
          }
        }
        .course-desc {
          width: 100%;
          height: 200px;
          .live-tit {
            font-size: 16px;
            color: #fff;
            line-height: 20px;
            margin-bottom: 7px;
          }
          .live-desc {
            color: #fff;
            font-size: 12px;
            line-height: 1.5;
          }
          .live-teacher {
            .live-t-name {
              color: #fff;
              font-size: 14px;
              line-height: 1.5;
              margin-bottom: 5px;
            }
            .live-t-date {
              color: #fff;
              font-size: 14px;
              line-height: 1.5;
            }
          }
          .enter-btn {
            cursor: pointer;
            display: inline-block;
            height: 40px;
            line-height: 40px;
            width: 120px;
            background: @md-primary-color;
            border-radius: 4px;
            text-align: center;
            color: #fff;
          }
        }
      }
    }
  }
  .course-box {
    width: 100%;
    background-color: #fff;
    .tab-box {
      width: 100%;
      height: 68px;
      background: #fff;
      box-shadow: 0 4px 8px 0 rgba(28, 31, 33, 0.1);
      .tab-block {
        width: 1152px;
        height: 68px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        .tab-item {
          position: relative;
          float: left;
          margin-right: 96px;
          font-size: 16px;
          color: #333;
          line-height: 40px;
          cursor: pointer;
          font-weight: 700;
          &::before {
            content: ' ';
            position: absolute;
            width: 20px;
            height: 3px;
            background: transparent;
            bottom: 0;
            margin-left: -10px;
            left: 50%;
            border-radius: 2px;
          }
        }
        .tab-item-active {
          color: @md-primary-color;
          &::before {
            background: @md-primary-color;
          }
        }
      }
    }
    .md-class-container {
      width: 1152px;
      margin: 0 auto;
      padding: 40px 0;
      .md-class-list {
        display: flex;
        flex-wrap: wrap;
        li {
          &:nth-child(4n) {
            .md-item-class-component {
              margin-right: 0;
            }
          }
          .md-item-class-component {
            position: relative;
            width: 272px;
            // height: 270px;
            float: left;
            margin: 0 20px 20px 0;
            box-shadow: 0 4px 8px 0 rgba(95, 101, 105, 0.05);
            border-radius: 8px;
            background-color: #fff;
            transition: transform 0.2s, box-shadow 0.2s;
            cursor: pointer;
            &:hover {
              transform: translateY(-2px);
              box-shadow: 0 12px 20px 0 rgba(95, 101, 105, 0.1);
            }
            img {
              width: 100%;
              height: 152px;
              background: no-repeat center/cover;
              margin-bottom: 8px;
              border-radius: 8px 8px 0 0;
              overflow: hidden;
            }
            .title {
              width: 100%;
              color: #545c63;
              line-height: 20px;
              height: 40px;
              margin-top: 8px;
              padding: 0 8px;
              &:hover {
                color: @md-primary-color;
              }
            }
            .ellipsis2 {
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
            }
            .one,
            .two {
              font-size: 12px;
              color: #9199a1;
              line-height: 18px;
              padding: 0 8px;
              margin-bottom: 8px;
              height: 20px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
        }
      }
      .pagination {
        margin-top: 20px;
        display: flex;
        justify-content: center;
      }
    }
  }
}
.scroll-bar {
  &::-webkit-scrollbar-track {
    // border-radius: 10px;
    background-color: #efefef;
  }

  &::-webkit-scrollbar {
    width: 4px;
    height: 4px;
    background-color: #efefef;
  }

  &::-webkit-scrollbar-thumb {
    // border-radius: 10px;
    // background-color: rgba(0, 0, 0, 0.2);
    background-color: #888;
  }
}
.no-data {
  color: #999;
  font-size: 12px;
  padding: 30px 0;
  text-align: center;
}
/deep/ .el-pagination .btn-next,
.el-pagination .btn-prev {
  background: transparent !important;
}
/deep/ .el-pagination button:disabled {
  background: transparent !important;
}
/deep/ .el-pager li {
  background: transparent !important;
}
/deep/ .el-pager li.active {
  color: @md-primary-color;
}
/deep/ .el-pager li:hover {
  color: @md-primary-color;
}
/deep/ .el-input__inner:focus {
  border-color: @md-primary-color !important;
}
/deep/ .el-pagination button:hover {
  color: @md-primary-color;
}
.md-swiper-box {
  flex: 1;
}
/deep/ .el-carousel__container .el-carousel__item .swiper-img {
  width: 100%;
}
/deep/ .el-carousel__item.is_animating {
  transition: 1s all;
}
/deep/ .el-carousel__button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
</style>